<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>商品管理</title>
<link rel="stylesheet" th:href="@{/moon/css/bootstrap2.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-c">
	<div class="container-fluid" id="app">
		<div class="row">
			<div class="col text-center bg-success text-white shadow">商 品 数
				据</div>
		</div>
		<div class="row mt-2">
			<div class="col">
				<div class="form-inline">
					<input type="text" class="form-control form-control-sm"
						placeholder="输入商品名称" id="gname" />&nbsp;&nbsp;&nbsp; <input
						type="text" class="Wdate" onclick="WdatePicker()"
						class="form-control form-control-sm" placeholder="输入上传时间"
						id="uploadtime" />&nbsp;&nbsp;&nbsp; 
						
						<select class="form-control form-control-sm ml-1" id="goodstatus">
						<option value="">状态</option>
						
							<option value="待审核">待审核</option>
						    <option value="审核未通过">审核未通过</option>
							<option value="上架">上架</option>
							<option value="等待竞价">等待竞价</option>
							<option value="拍卖中">拍卖中</option>
							<option value="竞价成功">竞价成功</option>
							<option value="竞价失败">竞价失败</option>
							<option value="无效">无效</option>
						  
					</select>
					<button class="btn btn-sm btn-success ml-2"
						@click="showdata(true);">查询</button>
				</div>
				<div class="row mt-4">
					<table class="table table-striped bg-light">
						<thead>
							<tr>
								<td>编号</td>
								<td>商品名称</td>
								<td>商品用户</td>
								<td>上传时间</td>
								<td>商品状态</td>
								<td>商品类别</td>
								<td>商品描述</td>
								<td>发布地址</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="g in goodsdata">
								<td>{{g.gid}}</td>
								<td>{{g.gname}}</td>
								<td>{{g.uname}}</td>
								<td>{{g.uploadtime}}</td>
								<td>{{g.goodstatus}}</td>
								<td>{{g.cname}}</td>
								<td>{{g.description}}</td>
								<td>{{g.name}}</td>
								<td>
									<button class="btn btn-dark btn-sm" data-toggle="modal"
										data-target="#myModal" @click="edit(g.gid)" title="编辑">
										<i class="fa fa-pencil" aria-hidden="true"></i>
									</button> 
									 <a href="#" class="btn btn-danger btn-sm" @click="deleteById(g.gid)"
									aria-label="Delete" title="删除"> <i class="fa fa-trash-o"
										aria-hidden="true"></i>
									</a>
								</td>
							</tr>

						</tbody>

					</table>
				</div>
				<form action="/auction/Goods/updateGoods" method="post" >
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="myModalLabel">编 辑 数 据</h5>
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">x</button>
							</div>
							<input type="hidden" name="gid" v-model="editgoods.gid">
							<div class="modal-body" style="width: 100%;">
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">商品名称</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="gname"
											 v-model="editgoods.gname"  disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">商品用户</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="uname"
											 v-model="editgoods.uname"  disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">上传时间</label>
									<div class="col-sm-7">
										<input
											type="text" class="Wdate" onclick="WdatePicker()"
											class="form-control" v-model="editgoods.uploadtime"
											id="uploadtime" name="uploadtime"/>
									</div>
								</div>
								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">竞拍状态</label>
									<div class="col-sm-7">
										<select data-placeholder="选择状态..." class="form-control"
											v-model="editgoods.goodstatus" name="goodstatus">
											<option value="">===请选择状态===</option>
											<option value="待审核">待审核</option>
										    <option value="审核未通过">审核未通过</option>
											<option value="上架">上架</option>
											<option value="等待竞价">等待竞价</option>
											<option value="拍卖中">拍卖中</option>
											<option value="竞价成功">竞价成功</option>
											<option value="竞价失败">竞价失败</option>
											<option value="无效">无效</option>
										</select>

									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">手机类别</label>
									<div class="col-sm-7">
										<select data-placeholder="选择类别..." class="form-control"
											v-model="editgoods.cname"  disabled="disabled">
											<option value="">===请选择类别===</option>
											<option>手机</option>
											<option>服装</option>
											<option>家电</option>
											<option>美妆</option>
											<option>玩具</option>
											<option>其他</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">商品描述</label>
									<div class="col-sm-9">
										<textarea class="form-control" 
											v-model="editgoods.description" name="description"  disabled="disabled">
										</textarea>
									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">发布地址</label>
									<div class="col-sm-9">
										<input type="text" class="form-control"
											v-model="editgoods.name" name="name"  disabled="disabled">
									</div>
								</div>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				</form>
				
				<div class="clearfix"></div>
				<div class="mt-2">
					<div id="pager" class="pagination"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/moon/js/jquery.js}"></script>
	<script th:src="@{/moon/js/bootstrap.js}"></script>
	<script th:src="@{/moon/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:src="@{/My97DatePicker/WdatePicker.js}"></script>
	<script th:inline="javascript">
		var pageNum = 1;

		//app
		var app = new Vue({
			el : "#app",
			data : {
				goodsdata : [],
				editgoods:{}
			},
			methods : {
				showdata : function(flag) {
					if (flag) {
						pageNum = 1;
						$("#pager").jqPaginator("option", {
							currentPage : 1
						});
					}
					$.post("/auction/Goods/selectByConds", {
						gname : $("#gname").val(),
						uploadtime : $("#uploadtime").val(),
						goodstatus : $("#goodstatus").val(),
						pageNum : pageNum,
						pageSize : 6
					}, function(data) {
						app.goodsdata = data.list;
						//alert(JSON.stringify(data));
						//修改totalPages
						$("#pager").jqPaginator("option", {
							totalPages : data.pagecount
						});
					});
				},
				edit:function(id){
					//alert(id);
					$.post(
						"/auction/Goods/selectById",
						"gid="+id,
						function (data){
							app.editgoods = data;
							//alert(JSON.stringify(data));
						}
					)
				},
				deleteById:function(id){
		          if (!confirm('确定要删除当前数据')) {
		            //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
		            return;
		          }else{
		        	  $.post(
						"/auction/Goods/deleteById",
						"gid="+id,
						function (data){
							layer.msg("删除"+id+"成功");
							app.$options.methods.showdata();
						}
					 )
		          }
				}
			},

		});

		//setpager
		$("#pager").jqPaginator({
			totalPages : 1,
			currentPage : 1,
			visiblePages : 6,
			onPageChange : function(num, type) {
				pageNum = num;
				$('#text').html('当前第' + num + '页');
				app.showdata();
			}
		});
		
	</script>
</body>
</html>
